<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>售后看板</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="remote-equipment-board" v-if="activeMenu!==null">
      <header class="navbar">
        <div class="title">{{user?user.company:''}}</div>
        <div class="menus header-btns clearfix">
          <div v-for="menu in menus" :key="'menu_'+menu.name" class="menu-item" :class="{select:menu.name===activeMenu[0]}">
            <el-dropdown v-if="menu.subMenus" @command="function(type){menuCommand(menu,type)}">
              <el-button size="medium" type="primary">{{menu.label}}</el-button>
              <el-dropdown-menu slot="dropdown" class="subMenuDropdown">
                <template v-for="subMenu in menu.subMenus">
                  <el-dropdown-item :key="'subMenu_'+subMenu.name" :command="subMenu.name">
                    <span :class="{select:subMenu.name===activeMenu[1]}">{{subMenu.label}}</span>
                  </el-dropdown-item>
                </template>
              </el-dropdown-menu>
            </el-dropdown>
            <el-button v-else size="medium" type="primary" @click="menuClick(menu)">
              {{menu.label}}
            </el-button>
          </div>
          <div>
            <el-button size="medium" @click="toBack">回到首页</el-button>
          </div>
        </div>
      </header>
      <div class="board-content clearfix">
        <template v-if="currentMenu!==null">
          <component :is="currentMenu.url"></component>
        </template>
      </div>
    </div>
  </div>
</body>

<script src="https://upload.shinehao.com.cn/20190223085008echarts.min.4.2.1-rc.1.js"></script>
<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "/vueSystem/components/css/imgUpload.css",
    "/vueSystem/components/css/showTextarea.css",
    "./machineBoard/css/machineItem.css",
    "./css/machineBoard.css",
    "./repairTableBoard/css/repairTableItem.css",
    "./repairTableBoard/css/repairTableDetail.css",
    "./css/repairTableBoard.css",
    "./repairBoard/css/repairBoardChart.css",
    "./css/repairBoard.css",
    "./repairTimeBoard/css/repairTimeItem.css",
    "./css/repairTimeBoard.css",
    "./css/repairCountBoard.css",
    "./alarmCountBoard/css/alarmCountBoardChart.css",
    "./css/alarmCountBoard.css"
  ], [
    "/vueSystem/i18n/index.js",
    "/vueSystem/components/showTextarea.js",
    "/vueSystem/components/imgUpload.js",
    "/vueSystem/models/baseModel.js",
    "/vueSystem/mixins/boardRunningMixin.js"
  ]);

</script>

<script src="./mixins/boardBasicMixin.js"></script>
<script src="./models/machineInfo.js"></script>
<script src="./models/repairTableInfo.js"></script>
<script src="./models/repairInfo.js"></script>
<script src="./models/repairTimeInfo.js"></script>
<script src="./models/repairCountInfo.js"></script>
<script src="./models/alarmCountInfo.js"></script>
<script src="./searchBtns.js"></script>

<script src="./machineBoard/machineItem.js"></script>
<script src="./machineBoard/index.js"></script>

<script src="./repairTableBoard/repairTableItem.js"></script>
<script src="./repairTableBoard/repairTableDetail.js"></script>
<script src="./repairTableBoard/index.js"></script>

<script src="./repairBoard/repairCustomerChart.js"></script>
<script src="./repairBoard/repairPartsChart.js"></script>
<script src="./repairBoard/index.js"></script>

<script src="./repairTimeBoard/repairTimeItem.js"></script>
<script src="./repairTimeBoard/index.js"></script>

<script src="./repairCountBoard/repairCountChart.js"></script>
<script src="./repairCountBoard/index.js"></script>

<script src="./alarmCountBoard/alarmCountMachineChart.js"></script>
<script src="./alarmCountBoard/alarmCountAlarmChart.js"></script>
<script src="./alarmCountBoard/index.js"></script>

<script type="text/javascript">
  var app = new Vue({
    el: '#app',

    mixins: [boardBasicMixin],

    data: function () {
      return {
        menus: [{
          label: "维修列表",
          url: "repair-table-board",
          name: "repairTableBoard"
        }, {
          label: "维修汇总",
          url: "repair-board",
          name: "repairBoard"
        }, {
          label: "维修时间",
          url: "repair-time-board",
          name: "repairTimeBoard"
        }, {
          label: "维修次数",
          url: "repair-count-board",
          name: "repairCountBoard"
        }, {
          label: "警报看板",
          url: "alarm-count-board",
          name: "alarmCountBoard"
        }]
      };
    },

    components: {
      MachineBoard: MachineBoard,
      RepairBoard: RepairBoard,
      RepairTableBoard: RepairTableBoard,
      RepairTimeBoard: RepairTimeBoard,
      RepairCountBoard: RepairCountBoard,
      AlarmCountBoard: AlarmCountBoard
    }
  });

</script>
<style>
  .remote-equipment-board {
    height: 100%;
    min-width: 1000px;
    position: relative;
  }

  .remote-equipment-board .navbar {
    position: relative;
    height: 43px;
    line-height: 43px;
    background: #000000;
  }

  .remote-equipment-board .navbar .title {
    font-size: 20px;
    color: #ffffff;
    padding-left: 320px;
    padding-right: 420px;
    text-align: center;
  }

  .remote-equipment-board .navbar .menus {
    position: absolute;
    right: 5px;
    top: 0;
    height: 100%;
  }

  .remote-equipment-board .header-btns {
    line-height: 43px;
  }

  .remote-equipment-board .header-btns>* {
    float: left;
  }

  .remote-equipment-board .header-btns>.select .el-button {
    background: none;
    border: 1px solid transparent;
  }

  .remote-equipment-board .header-btns>*+* {
    margin-left: 3px;
  }

  .remote-equipment-board .board-content {
    height: calc(100% - 43px);
  }

  .remote-equipment-board .search-btns {
    position: absolute;
    height: 43px;
    left: 5px;
    top: 0;
  }

  .subMenuDropdown .el-dropdown-menu__item span.select {
    color: #409EFF;
  }

</style>

</html>
